<template>
  <div class="app">
    <div class="opt-div">
      <div class="video" @click="toVideoView" v-if="showVideo">教学视频学习</div>
      <div>
        <div class="knowledge" @click="toTextView()">知识点学习</div>
      </div>
      <div style="display: flex; align-items: center">
        <div class="train" @click="toExamView(1)">初级答题</div>
        <div class="train" @click="toExamView(2)">中级答题</div>
        <div class="train" @click="toExamView(3)">高级答题</div>
      </div>
    </div>
    <div class="return" @click="back"></div>
  </div>
</template>

<script>
import { BizExamController, BizMaterialController } from '@/api';
export default {
  name: 'scene',
  data() {
    return {
      sceneType: null,
      moduleType: 2,
      personnelType: null,
      showVideo: false
    };
  },
  methods: {
    back() {
      this.$router.replace({
        name: 'frontChallenge',
        query: { personnelType: this.personnelType }
      });
    },
    toVideoView() {
      this.$router.replace({
        name: 'videoview',
        query: {
          sceneType: this.sceneType,
          moduleType: this.moduleType,
          personnelType: this.personnelType
        }
      });
    },
    toTextView() {
      this.$router.replace({
        name: 'textview',
        query: {
          sceneType: this.sceneType,
          moduleType: this.moduleType,
          personnelType: this.personnelType
        }
      });
    },
    toExamView(subjectLevel) {
      let params = {
        sceneType: this.sceneType,
        moduleType: this.moduleType,
        examLevel: subjectLevel
      };
      BizExamController.exist(this, params)
        .then(res => {
          if (res.data && res.data.passAble) {
            this.$router.replace({
              name: 'examDetail',
              query: {
                sceneType: this.sceneType,
                moduleType: this.moduleType,
                personnelType: this.personnelType,
                examLevel: subjectLevel
              }
            });
          } else {
            this.$router.replace({
              name: 'examview',
              query: {
                sceneType: this.sceneType,
                moduleType: this.moduleType,
                personnelType: this.personnelType,
                examLevel: subjectLevel
              }
            });
          }
        })
        .catch(e => {
          console.error(e);
        });
    },
    getVideo() {
      let params = {};
      params.materialFilter = {
        sceneType: this.sceneType,
        moduleType: this.moduleType,
        materialType: 2
      };
      return new Promise((resolve, reject) => {
        BizMaterialController.findByFront(this, params).then(res => {
          BizMaterialController.findByFront(this, params)
            .then(res => {
              if (res.data && res.data.length > 0) {
                if (res.data[0] && res.data[0].materialPreviewUrl) {
                  this.showVideo = true;
                }
              }
              console.log(this.showVideo);
            })
            .catch(e => {
              reject(e);
            });
        });
      });
    }
  },
  mounted() {
    const sceneType = this.$route.query.sceneType;
    this.sceneType = sceneType;
    const personnelType = this.$route.query.personnelType;
    this.personnelType = personnelType;
    this.getVideo();
  }
};
</script>
<style scoped>
.app {
  background-image: url('~@/assets/img/bg.png'); /* 注意：'~@/' 可能是 Webpack 的别名，如果直接在 CSS 中使用可能无效，需要确保它已被正确解析 */
  background-size: cover;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 让父容器充满整个视口高度 */
}

.app .opt-div {
  width: 642px;
  height: 340px;
}

.app .opt-div div {
  width: 642px;
  height: 91px;
  margin: 20px 0;
  background-image: url('~@/assets/img/btnLabel.png'); /* 注意：同上 */
  background-size: cover;
  cursor: pointer;
  text-align: center;
  font-size: 24px;
  font-weight: bolder;
  color: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    '微软雅黑', Arial, sans-serif;
  font-style: italic;
  letter-spacing: 2px;
  line-height: 91px;
  vertical-align: middle;
}

.app .return {
  width: 252px;
  height: 66px;
  background-image: url('~@/assets/img/return.png'); /* 注意：同上 */
  background-size: cover;
  position: absolute;
  bottom: 8%;
  cursor: pointer;
}
</style>
